<template>
  <div class="home">
    <custom title="注册会员" />
    <div class="vipImg flex">
      <img src="@/assets/registerMember/shopIcon.png" alt="" class="shopImg" />
      <div class="exceedOne vipTit">{{ mermberInfo.merchantName }}</div>
    </div>
    <div class="flex align-center">
      <div class="titLink"></div>
      <div class="tit">填写以下信息完成办理</div>
    </div>
    <div class="formBox">
      <div class="flex form">
        <div class="formBoxTit">手机号</div>
        <input v-model="form.mobile" type="number" class="formBoxInput" @input="form.mobile=form.mobile.slice(0,11)" @blur="onInputBlur('checkIphone','mobile')" />
      </div>
      <div class="flex justify-sb form">
        <div class="flex">
          <div class="formBoxTit">验证码</div>
          <input v-model="form.code" class="formBoxInput" type="number" @blur="onInputBlur('checkCode','code')" @input="form.code=form.code.slice(0,6)" />
        </div>
        <div :class="['formCode',isAgainCode?'formCodeAct':'']" @click="onGetCode">{{ form.codeTitle }}</div>
      </div>
    </div>
    <div class="flex" @click="isCheck = !isCheck">
      <div v-show="!isCheck" class="checkBox"></div>
      <img v-show="isCheck" src="@/assets/registerMember/check.png" alt="" class="checkBoxImg" />
      <div>我已阅读并同意《商户会员协议》</div>
    </div>
    <div class="memberButBox">
      <div class="memberBut" @click="onCreateCard">生成会员卡</div>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
import { baseUtils, fromUtils } from '@/utils/public.js'
import { commonAjax, loginAjax } from 'Ajax'
import { getCookie } from '@/utils/validate.js'

export default {
  components: {
    custom
  },
  data() {
    return {
      isCheck: false,
      form: {
        mobile: '',
        code: '',
        codeTitle: '获取验证码'
      },
      mermberInfo: {}
    }
  },
  computed: {
    isAgainCode: function() {
      return this.form.codeTitle.includes('s后重试')
    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      commonAjax.getMemberDetail().then(res => {
        this.mermberInfo = res
      })
    },
    onGetCode() {
      if (this.form.mobile === '') return this.$toast('请输入您的手机号')
      if (this.isAgainCode) return
      baseUtils.countDown(60, (txt) => {
        this.form.codeTitle = txt
      })
      commonAjax.getPhoneCode({ 'mobile': this.form.mobile }).then(res => {
        this.$toast('发送成功~')
      })
    },
    // 校验
    onInputBlur(type, val) {
      const msg = fromUtils[type](this.form[val])
      if (msg) {
        this.$toast(msg)
        this.form[val] = ''
      }
    },
    onCreateCard() {
      if (!this.form.mobile || !this.form.code) return this.$toast('请输入完整信息~')
      if (!this.isCheck) return this.$toast('请勾选协议~')
      const params = {
        mobile: this.form.mobile,
        phoneCode: this.form.code,
        terminalNo: getCookie().terminalNo,
        type: 2
      }
      loginAjax.wxRegister(params).then(res => {
        this.$store.dispatch('public/setUserInfo', res)
        this.$jump({ path: '/register-success', query: { type: 'register' }})
      })
    }
  }
}
</script>

<style scoped>
.vipImg{
  width: 660px;
  height: 360px;
  margin: 0 auto;
  background: url('../../assets/registerMember/vipBg.png') no-repeat;
  background-size: 100% 100%;
}
.shopImg{
  width: 84px;
  height: 84px;
  display: block;
  margin: 46px 20px 0 48px;
}
.vipTit{
  font-size: 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  color: #704B0D;
  margin-top: 65px;
}
.titLink{
  width: 12px;
  height: 30px;
  background: #F35517;
  border-radius: 6px;
  margin-left: 55px;
  margin-top: 30px;
}
.tit{
  font-size: 30px;
  font-weight: 500;
  color: #040404;
  margin: 30px 0 0 20px;
}
.formBox{
  padding: 40px 55px;
}
.form{
  padding: 40px 0;
  border-bottom: 1px solid #E8E8E8;
  font-size: 28px;
  color: #000000;
}
.formBoxInput{
  width: 240px;
  margin-left: 70px;
  border: none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance: none;
  -o-appearance: none;
  box-shadow:none;
  outline: none;
}
.formCode{
  color: #F35517;
  font-size: 26px;
}
.formCodeAct{
  color: #bbb;
}
.checkBox{
  width: 26px;
  height: 26px;
  border: 1px solid #FAD9C6;
  border-radius: 50%;
  margin: 0 18px 0 55px;
}
.checkBoxImg{
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 18px 0 55px;
}
.memberButBox{
  position: fixed;
  bottom: 30px;
  width: 100%;
}
.memberBut{
  width: 630px;
  height: 100px;
  background: linear-gradient(90deg, #EF3814 0%, #FF8D13 100%);
  box-shadow: 0px 6px 11px 1px #FAD9C6;
  border-radius: 20px;
  margin: 0 auto;
  color: #fff;
  font-size: 34px;
  line-height: 100px;
  text-align: center;
}
</style>
